<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/index.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/jquery.mCustomScrollbar.css" />
    <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/vue.js"></script>
    <script src="${pageContext.request.contextPath}/js/common.js"></script>
    <script src="//open.thunderurl.com/thunder-link.js"></script>
    <title>详情</title>
</head>
<body>

<jsp:include page="common/header.jsp"/>

<article>
    <!-- 网站主体 -->
    <div id="main">
        <!-- 定义右侧窗口信息 -->
        <section class="aside">

            <jsp:include page="common/asideUser.jsp"/>

            <!-- vip充值窗口 2022/8/14新增 -->
            <div class="vip-cvs">
                <div class="vip-cz-win">
                    <p class="title">爱下载资源分享平台-开通VIP</p>
                    <div class="v1">
                        <h1>月会员</h1>
                        <p class="money">10</p>
                        <p class="ls">有效期30天</p>
                        <p class="ls">免费资源下载</p>
                        <p class="ls">赠送200积分</p>
                        <a class="btn">立即开通</a>
                    </div>
                    <div class="v2">
                        <h1>年会员</h1>
                        <p class="money">80</p>
                        <p class="ls">有效期365天</p>
                        <p class="ls">免费资源下载</p>
                        <p class="ls">赠送2000积分</p>
                        <a class="btn">立即开通</a>
                    </div>
                    <div class="v3">
                        <h1>永久会员</h1>
                        <p class="money">300</p>
                        <p class="ls">永久有效</p>
                        <p class="ls">免费资源下载</p>
                        <p class="ls">赠送10000积分</p>
                        <a class="btn">立即开通</a>
                    </div>
                </div>
            </div>

            <!-- 评论资源 -->
            <aside class="res-com">
                <h1 class="res-title">资源评论</h1>
                <textarea class="area" placeholder="下载资源后方可评论"  v-model="content" ref="errMsg"></textarea>
                <div class="star">
                    <span v-for="i in 5" :class="{act: i <= start}" @click="start = i">★</span>
                </div>
                <div class="btn"><button type="button" @click="submitCommon" >提交评论</button></div>
            </aside>
        </section>
        <section>
            <!-- 定义详细目录-->
            <c:set value="${sessionScope.local_session_user_flag}" var="currentUser"></c:set>
            <div id="detail">
                <!-- 资源上传者信息 -->
                <div class="res-author">
                    <img :src="'${pageContext.request.contextPath}/resource/photo?u='+ uId"/>
                    <span>{{nickName}}</span><br/>
                    <div class="gz" v-if="loginId != uId" ref="letMsg">
                        <a class="lr" @click="changeStatus($event, uId)" href="javascript:void(0)" v-if="status==1">已关注</a>
                        <a class="qx" @click="changeStatus($event, uId)" href="javascript:void(0)" v-else>关注</a>
                        <a id="letter" @click="skipLetter" >私信</a>
                    </div>
                    <a :href="'${pageContext.request.contextPath}/user/more?u='+uId">查看TA的更多资源</a>
                </div>

                <!-- collect 样式 会显示 收藏印章(如果该资源没有被收藏，不显示) -->
                <div class="res-detail " :class="{collect:collection}">

                    <!-- 资源信息 -->
                    <c:set value="${requestScope.resource}" var="res"></c:set>
                    <div class="title">
                        <h1>${res.resourceName}<a href="javascript:void(0)"></a></h1>
                        <b class="time">${res.time}</b>
                        <b class="filesize">{{fileSize}}</b>
                        <span class="kws">
						<em v-for="k in kws">{{k}}</em>
					</span>
                    </div>

                    <div class="desc"> <!-- 信息描述-->
                        ${res.resourceDesc}
                    </div>
                    <div class="msg"> <!-- 评价信息-->
                        <span :class="{act:star>=i}" v-for="i in 5">★</span>
                    </div>
                    <div class="oper"> <!-- 下载操作-->
                        <span>所需积分：<b>${res.score}</b></span>
                        <span>下载次数：<b>{{downloadCount}}</b></span>
                        <br/>
                        <span>
						<a class="btn" @click="collect" ref="collect" v-show="!collection">收藏</a>
						<a class="btn" @click="collect" ref="collect" v-show="collection">取消收藏</a>
						<a class="btn downx" ref="downx" @click="downx">普通下载</a>
						<a class="btn thunder" ref="thunder" @click="downThunder">迅雷下载</a>
					</span>
                    </div>
                </div>

            </div>
            <div id="comment">
                <div class="title">
                    评论：<span>共有<b>{{totalrows}}</b>条</span>
                </div>

                <!--每一条评论 -->
                <template v-for="c in commentment">
                <div class="cons">
                    <div class="img">
                            <img :src="'${pageContext.request.contextPath}/resource/photo?u='+ c.user_id " />
                        <span class="star">
					    <span :class="{act:c.stars>=i}" v-for="i in 5">★</span>
					</span>
                    </div>

                    <div class="cmt" >
                        <span>{{c.nick_name}}</span>|<span>{{getTime(c.com_time)}}</span>
                        <p class="msg">
						<span>
							{{c.com_content}}
						</span>
                        </p>
                    </div>

                </div>
                </template>
                <!-- 分页 -->
                <jsp:include page="common/pagination.jsp"/>

            </div>

        </section>
    </div>
</article>

<jsp:include page="common/footer.jsp"/>

</body>

<script>
    new Vue({
        el:"#main",
        data:{
            size:'${res.size}',
            kws:"${res.keywords}".split("::"),
            star:${res.star},
            collection:${res.collect},
            rId:'${res.id}',
            page:1,
            total:0,
            commentment:[],
            totalrows:0,
            uId:'${res.userId}',
            loginId:'${currentUser.id}',
            nickName:null,
            photo:null,
            attentionList:[],
            status:"",
            pic:"",
            resPath:"${res.resource}",
            ext:"${res.ext}",
            filename:"${res.resourceName}",
            downloadCount:${requestScope.downloadCount},
            start:1,
            content:null,
            letterURL:null,
        },
        created(){
          this.comment();
          this.showUserInfo();
          this.getShowAttention();
        },
        computed:{
            fileSize(){
                if (this.size > (1<<30)){
                    return (this.size / (1<<30)).toFixed(2) + "GB";
                }
                if (this.size > (1<<20)){
                    return (this.size / (1<<20)).toFixed(2) + "MB";
                }
                if (this.size > (1<<10)){
                    return (this.size / (1<<10)).toFixed(2) + "KB";
                }
                return this.size + "B";
            }
        },
        methods:{
                /*跳转私信*/
                skipLetter(){
                    fetch("${pageContext.request.contextPath}/msg/skipletter?resUserId="+this.uId).then(ret =>{
                        if(ret.status){
                            window.location.href="${pageContext.request.contextPath}/msg/message?f=letter";
                            //this.letterURL="${pageContext.request.contextPath}/msg/message?f=letter&resUserId="+this.uId;
                        }
                        if (!ret.status){
                            $(this.$refs.letMsg).tooltips(ret.message);
                        }
                    })
                },
            getShowAttention(){
                fetch("${pageContext.request.contextPath}/showAttention?rid="+ this.uId).then(ret =>{
                    if (ret.status){
                        this.status = ret.data.status;
                    }
                })
            },
            changeStatus(event, uId){
                    if (event.target.className == "lr"){
                        event.target.className = "qx";
                        event.target.text = "关注";
                        fetch("${pageContext.request.contextPath}/deleteAttention?uid="+ uId).then(ret =>{
                        })
                    }else if (event.target.className == "qx"){
                        event.target.className = "lr";
                        event.target.text = "已关注";

                        fetch("${pageContext.request.contextPath}/addAttention?uid="+ uId ).then(ret =>{
                        })
                    }
            },
            downThunder(){
                fetch("${pageContext.request.contextPath}/resource/down?resId=" + this.rId+"&uId="+this.uId).then(ret =>{
                        if (ret.status){
                            let data = ret.data;
                            let deduct = data.deduct;
                            let score = data.score;
                            let record = data.record;
                            let sign = data.sign;
                            let url = location.protocol + "//" + location.host + "${pageContext.request.contextPath}/resource/downloadFile?deduct="+deduct+"&record="
                                +record+"&score="+score+"&path="+this.resPath +"&fileName=" + this.filename + "&ext="+this.ext +"&sign="+sign;
                            thunderLink.newTask({
                                tasks: [{
                                    name: '${res.resourceName}.${res.ext}', // 指定下载文件名（含扩展名）。【若不填此项，将根据下载 URL 自动获取文件名】
                                    url: url // 指定下载地址【必填项】
                                }],
                            });
                            $(this.$refs.downx).tooltips("资源下载成功");
                            if (record == 1){
                                this.downloadCount = this.downloadCount + 1;
                            }
                        }
                        $(this.$refs.downx).tooltips(ret.message);
                })
            },
            downx(){
                fetch("${pageContext.request.contextPath}/resource/down?resId=" + this.rId+"&uId="+this.uId).then(ret =>{
                    if (ret.status){
                        let data = ret.data;
                        let deduct = data.deduct;
                        let score = data.score;
                        let record = data.record;
                        let sign = data.sign;
                        location.href="${pageContext.request.contextPath}/resource/downloadFile?deduct="+deduct+"&record="
                                    +record+"&score="+score+"&path="+this.resPath +"&fileName=" + this.filename + "&ext="+this.ext +"&sign="+sign;
                        $(this.$refs.downx).tooltips("资源下载成功");
                        if (record == 1){
                            this.downloadCount = this.downloadCount + 1;
                        }
                    }
                    $(this.$refs.downx).tooltips(ret.message);
                })
            },
            /*提交资源评论*/
            submitCommon(){
                  if (this.content == null){
                       $(this.$refs.errMsg).tooltips("评论内容不能为空");
                       return;
                  }
                  let formdata = new FormData;
                  formdata.append("content",this.content);
                  formdata.append("start",this.start);
                  formdata.append("resId",this.rId);
                  fetch("${pageContext.request.contextPath}/res/reviews?resUserId="+ this.uId,{
                      method:"POST",
                      body:formdata
                  }).then(ret =>{
                      $(this.$refs.errMsg).tooltips(ret.message);
                       this.start = 1;
                       this.content = null;
                  })
            } ,
            showUserInfo(){
                fetch("${pageContext.request.contextPath}/resource/userInfo?userId=" + this.uId).then(ret =>{
                    this.nickName = ret.data.nickName;
                    this.photo = ret.data.photo;
                })
            },
            getTime(timestamp){
                let date = new Date(timestamp);
                return date.format("yyyy-MM-dd HH:mm:ss")
            },
            collect(){
                fetch("${pageContext.request.contextPath}/resource/collect?resId=" + this.rId).then(ret =>{
                    $(this.$refs.collect).tooltips(ret.data);
                    if(ret.status){
                        this.collection = !this.collection;
                        this.pic = ret.data.photo;
                    }else {
                        $(this.$refs.collect).disabled();
                    }
                })
            },
            comment(){
                fetch("${pageContext.request.contextPath}/resource/comment?resId=" + this.rId).then(ret =>{
                    if (ret.status) {
                        this.commentment = ret.data.list;
                        this.total = ret.data.total;
                        this.totalrows = ret.data.totalRows;
                    }
                })
            }
        },
        watch:{
            page: function(newPage,oldPage){
                // 获取 新页码 对应的 数据
                fetch("${pageContext.request.contextPath}/resource/comment?resId=" + this.rId+"&page=" + newPage).then(ret =>{
                    if (ret.status){
                        this.commentment = ret.data.list;
                        this.total = ret.data.total;
                    }
                })
            }
        }
    })
</script>

</html>
